<template>
  <div>
	  
	  <div style="display: flex;flex-direction: row;">
		  <el-input placeholder="请输入用户名" style="width: 210px;margin-right: 30px;"  v-model="username"></el-input>
		  <el-button type="primary" @click="getdata()"><i class="el-icon-search" style="margin-right: 5px;"></i>搜索</el-button>
		  <el-button type="primary" @click="handleEdit()"><i class="el-icon-edit" style="margin-right: 5px;"></i>添加</el-button>
	  </div>
	  
        <el-table  :data="data">
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="class_name" label="班级名字"></el-table-column>
            <el-table-column prop="xueyuan" label="学院"></el-table-column>
            <el-table-column prop="number" label="人数"></el-table-column>
			<el-table-column
			      fixed="right"
			      label="操作"
			      width="100">
			      <template slot-scope="scope">
			       
			       <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
				   <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
			      </template>
			    </el-table-column>
        </el-table>
		<el-dialog
		  :title="obj.id==0?'新增学生数据':' 编辑学生数据'"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose">
		  <el-form ref="form" label-width="70px">
		<el-form-item label="id" v-if="obj.id>0">
		  <el-input v-model="obj.id" disabled></el-input>
		  </el-form-item><el-form-item label="班级名字">
		  <el-input v-model="obj.class_name"></el-input>
		  </el-form-item><el-form-item label="学院">
		  <el-input v-model="obj.xueyuan"></el-input>
		  </el-form-item><el-form-item label="人数">
		  <el-input v-model="obj.number" type="number"></el-input>
		  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click=" edit">确 定</el-button>
		  </span>
		</el-dialog>
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'
export default {
  name:'HomeView',
  data() {
  	return{
		data:[],
		obj:{},
		 dialogVisible: false,
		 username:""
	}
  },
  created() {
  	this.getdata()
  },
  methods:{
	  handleClick(item){
		  console.log(item)
		  
		  this.$confirm('此操作将永久删除id为'+item.id+'的班级, 是否继续?', '提示', {
		            confirmButtonText: '确定',
		            cancelButtonText: '取消',
		            type: 'warning'
		          }).then(() => {
		        
					axios.post("http://localhost:8080/user/delete",item).then(res=>{
								 console.log(res)
								  if(res.data=="删除成功"){
									   this.$message({
									            message: '删除成功',
									            type: 'success'
									          });
											  this.getdata()
								  }else{
									   this.$message.error('删除失败');
								  }
					})
		          }).catch(() => {
		            this.$message({
		              type: 'info',
		              message: '已取消删除'
		            });          
		          });
		  
		  
	  },
	  getdata(){
		  axios.get("http://localhost:8080/user/all?xueyuan="+this.username).then(res=>{
			 this.data=res.data
			 console.log(this.data);
		  })
	  },
	  handleEdit(item){
		  if(item){
			
		  this.obj=JSON.parse(JSON.stringify(item)) 
		  
		  }else{
			  this.obj={
				  id:0,
				  class_name:"",
				  xueyuan:"",
				  number:"",
				  
			  }
		  }
		  this.dialogVisible=true
	  },
	  edit(){
		  this.dialogVisible=false
		  axios.post("http://localhost:8080/user/edit",this.obj).then(res=>{
		  			 console.log(res)
		  			  if(res.data=="编辑成功"){
		  				   this.$message({
		  				            message: '编辑成功',
		  				            type: 'success'
		  				          });
		  						  this.getdata()
		  			  }else if(res.data=="新增成功"){
		  				   this.$message({
		  				            message: '新增成功',
		  				            type: 'success'
		  				          });
		  						  this.getdata()
		  			  }else{
		  				   this.$message.error('res.data');
		  			  }
		  })
	  }
  }
}
</script>
